<template>
	<view class='indexWrapper'>
		<image src="../../static/index_bg1.jpg" class='indexWrapperBg'></image>
		<view class="indexWrapperInfo">
			<view class="indexWrapperTit">
				<view>我们在一起</view>
				<view><text>{{personal.differ_time ? personal.differ_time : '0'}}</text>天</view>
			</view>
			<view class="indexWrapperImg">
				<image :src="personal.avatarUrl" mode="widthFix" class='userImg'></image>
				<image :src="personal.love_avatarUrl" mode="widthFix" class='userImg otherImg'></image>
			</view>
			<view class="loveInfo" @tap="rankingList">
				<view class='loveInfoL'>
					<icon class='iconfont icon-tubiao-'></icon>
				</view>
				<view class="loveInfoR">
					<view>{{personal.intimacy ? personal.intimacy : 0}}</view>
					<view>亲密值</view>
				</view>
			</view>
			<view class="sweetList">
				<view class="sweetListItem" @click="tosweetDay()">
					<view class='sweetListItem_l' >
						<view>纪念日</view>
						<view><text>{{personal.anniver_num ? personal.anniver_num : 1}}</text>个</view>
					</view>
					<view class='sweetDay'>
						<i class='iconfont icon-rili'></i>
					</view>
				</view>
				<view class="sweetListItem" @click="towishList()">
					<view class='sweetListItem_l'>
						<view>愿望清单</view>
						<view><text>{{personal.desire_num ? personal.desire_num : 0}}</text>个</view>
					</view>
					<view class='wishList'>
						<i class='iconfont icon-rili'></i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personal:{}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.infoMes();
		},
		methods: {
			/**
			 * @author armg999
			 * @description 获取个人信息
			 */
			infoMes:function(){
				this.$api.getMes({}).then(res => {
					if(res.code == 200){
						this.personal = res.data;
					}
				})
			},
			/**
			 * @author armg999
			 * @description 纪念日
			 */
			tosweetDay:function(){
				uni.navigateTo({
					url:'/pages/home/sweetDay'
				})
			},
			/**
			 * @author armg999
			 * @description 愿望清单
			 */
			towishList:function(){
				this.msg('功能正在开发中...');return;
				uni.navigateTo({
					url:'/pages/home/wishList'
				})
			},
			
			/**
			 * @author smallfour
			 * @description 排行榜
			 */
			rankingList:function(){
				this.msg('排行榜功能即将上线');return;
				return false;
				uni.navigateTo({
					url:'/pages/home/ranking'
				})
			}
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '四片小叶子',
				path: '/pages/tabBar/index'
			}
		}
	}
</script>

<style lang="scss">
	.indexWrapper{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
		overflow: hidden;
	}
	.indexWrapperBg{
		width: 100%;
		height: 100%;
	}
	.indexWrapperInfo{
		width:100%;
		position: absolute;
		top:20%;
		/* background: rgba(255,255,255,.3); */
	}
	.indexWrapperTit{
		color: #000000;
		font-weight: bold;
		font-size: 46rpx;
		margin-left:5%;
	}
	.indexWrapperTit text{
		font-size: 80rpx;
		font-weight: normal;
		margin-right:10rpx;
	}
	.indexWrapperImg{
		margin-top:50rpx;
		margin-left:5%;
	}
	.userImg{
		width:140rpx;
		height:auto;
		border-radius: 50%;
		border:4rpx solid #f6fdff;
	}
	.otherImg{
		margin-left:-30rpx;
	}
	
	.loveInfo{
		float: right;
		display: flex;
		align-items: center;
		background-color: rgba(255,255,255,.7);
		border-radius: 50rpx 0 0 50rpx;
		font-size: 28rpx;
		color:#fff;
		height:80rpx;
		width: 230rpx;
	}
	.loveInfoL{
		background-color: rgba(255,255,255,1);
		width:80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 88rpx;
	}
	.loveInfoL>icon{
		color:#ef4870;
		font-size: 50rpx;
	}
	.loveInfoR{
		text-align: center;
		padding-left:20rpx;
	}
	.loveInfoR>view:nth-child(1){
		color:#ef4870;
		font-size: 30rpx;
	}
	.loveInfoR>view:nth-child(2){
		color:#000;
		font-size: 24rpx;
	}
	.sweetList{
		width:90%;
		margin:200rpx auto 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sweetListItem{
		width: 43%;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding:20rpx 10rpx;
	}
	.sweetListItem_l{
		font-weight: bold;
		font-size: 32rpx;
		line-height: 50rpx;
	}
	.sweetListItem_l>view:nth-child(2){
		font-weight: normal;
	}
	.sweetListItem_l text{
		color:#ff3da1;
		font-weight: bold;
		margin:0 5px;
		font-weight: 50rpx;
	}
	.sweetListItem>view:nth-child(2){
		width:90rpx;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
	}
	.sweetListItem>view:nth-child(2)>i{
		font-size: 50rpx;
	}
	.sweetDay{
		background: linear-gradient(to bottom,#ff3da1,#ff2554);
	}
	.wishList{
		background: linear-gradient(to bottom,#73ebbb,#32b0e8);
		
	}
</style>
